import { FILE_UPLOAD_URL } from "@/constant/common";
import { ResponseCode } from "@/enum/ResponseCode";
import { UploadBizEnum } from "@/enum/UploadBizEnum";
import { updateMyUser, updateUser } from "@/servers/api/userController";
import request from "@/utils/request";
import {
  Button,
  Form,
  Grid,
  Image,
  Input,
  Message,
  Space,
  Typography,
  Upload,
} from "@arco-design/web-react";
import { useCallback, useState } from "react";
import { flushSync } from "react-dom";
import { useModel } from "umi";
const FormItem = Form.Item;
export default () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const { loginUser } = useModel("@@initialState").initialState || {};
  const { initialState, setInitialState } = useModel("@@initialState");
  const onChange = (files: any) => {
    setFileList(files);
  };
  const uploadIcon = async () => {
    const file = fileList[0];
    if (!file) {
      return "";
    }
    const formData = new FormData();
    //@ts-ignore
    formData.append("file", file?.originFile);
    formData.append("biz", UploadBizEnum.USER_AVATAR);
    let res = await request.post(FILE_UPLOAD_URL, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    if (res.data.code === ResponseCode.SUCCESS) {
      return res.data.data;
    } else {
      return "";
    }
  };
  const onSubmit = async () => {
    let url = await uploadIcon();
    let data = form.getFieldsValue() as API.UserUpdateMyRequest;
    data.userAvatar = !url ? loginUser?.userAvatar : url;
    let res = await updateMyUser(data);
    if (res.data.code === ResponseCode.SUCCESS) {
      flushSync(() => {
        setInitialState({
          ...initialState,
          loginUser: {
            ...loginUser,
            userName: data.userName,
            userProfile: data.userProfile,
            userEmail: data.userEmail,
            userAvatar: data.userAvatar,
          },
        });
      });
      setFileList([]);
      Message.success("修改成功");
    } else {
      Message.error(res.data.message as string);
    }
  };
  return (
    <div>
      <Typography.Title heading={5} style={{ margin: 0 }}>
        基本设置
      </Typography.Title>
      <Grid.Row align="start" justify="space-between">
        <Grid.Col md={8} sm={24} xs={24}>
          <Form
            form={form}
            layout="vertical"
            autoComplete="off"
            initialValues={loginUser}
          >
            <FormItem field="userEmail" label="邮箱">
              <Input placeholder="请输入邮箱" allowClear />
            </FormItem>
            <FormItem field="userName" label="昵称">
              <Input placeholder="请输入昵称" allowClear />
            </FormItem>
            <FormItem field="userProfile" label="个人简介">
              <Input.TextArea placeholder="请输入简介" allowClear />
            </FormItem>
            <FormItem wrapperCol={{ offset: 0 }}>
              <Button type="primary" onClick={onSubmit}>
                更修基本信息
              </Button>
            </FormItem>
          </Form>
        </Grid.Col>
        <Grid.Col md={12} sm={24} xs={24}>
          <Space direction="vertical">
            <Typography.Text>头像</Typography.Text>
            <Image
              style={{ borderRadius: "50%" }}
              height={200}
              src={loginUser?.userAvatar}
            />

            <Upload
              multiple
              limit={1}
              accept="image/png, image/jpeg"
              autoUpload={false}
              onChange={onChange}
              action={FILE_UPLOAD_URL}
            >
              <Space size="large">
                <Button>更换头像</Button>
              </Space>
            </Upload>
          </Space>
        </Grid.Col>
      </Grid.Row>
    </div>
  );
};
